<template>
  <div class="padding-right-15">
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <span class="font-size-16 font-weight-700 padding-right-10">履约保证金</span>
          <i v-if="isEdit" class="header-icon el-icon-plus" @click.stop="addItem"></i>
        </template>
        <el-table :border="true" :data="tableList">
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <el-input-number :controls="false" class="no-border-input yj-input" :disabled="!isEdit" v-model="scope.row.stageNum"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资产">
            <template slot-scope="scope">
              <el-select class="yj-input" :disabled="!isEdit" v-model="scope.row.shopKey" placeholder="请选择" @change="setAssetTxt(scope.row)">
                <el-option v-for="(item) in selfAssetsList" :key="item.assetKey" :label="item.assetName" :value="item.assetKey"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="开始时间" width="155px">
            <template slot-scope="scope">
              <el-date-picker type="date" :disabled="!isEdit" value-format="timestamp" class="no-border-input yj-input" v-model="scope.row.rentStartDate" @change="validateDate(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间" width="155px">
            <template slot-scope="scope">
              <el-date-picker type="date" :disabled="!isEdit" value-format="timestamp" class="no-border-input yj-input" v-model="scope.row.rentEndDate" @change="validateDate(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额/元">
            <template slot-scope="scope">
              <el-input-number :controls="false" class="no-border-input yj-input" :disabled="!isEdit" v-model="scope.row.amount"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column align="center" label="付款时间">
            <template slot-scope="scope">
              <el-date-picker type="date" :disabled="!isEdit" value-format="timestamp" class="no-border-input yj-input" v-model="scope.row.paymentDate" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" v-if="isEdit">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteItem(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import { contractCost } from '../../mixin/contractCost';

  export default {
    mixins: [contractCost],
    props: {
      isEdit: {
        type: Boolean,
        default: true,
      },
      selfAssetsList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      pageName: {
        type: String,
        default: '',
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        tableList: [],
        activeNames: ['1'],
        formObj:{
          stageNum:undefined,
          shopKey:'',
          rentStartDate:'',
          rentEndDate:'',
          amount:undefined,
          paymentDate:'',
          shopName:'',
          shopCode:'',
        },
      };
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    font-weight: 700;
    border: none;
  }
</style>
